<template>
	<view>
		<Navbar :background="background"></Navbar>
		<view class="point_header">
			<view class="header_point">
				<view class="header_point_title u-m-t-35">
					{{ userScore }}
				</view>
				<text class="header_point_tag u-m-t-10">我的积分</text>
			</view>
		</view>
		<view class="u-m-30">充值积分</view>
		<view class="u-m-30 u-flex u-row-between u-flex-wrap">
			<view class="u-m-b-30" :class="item.id == checkObj.id ? 'check_point' : 'common_point'" v-for="item in list"
				:key="item.id" @click="changePoint(item)">
				<view class="u-flex u-row-between u-col-top">
					<u-image :src="image" width="44" height="44" mode=""></u-image>
					<view class="u-m-l-5 u-flex-1 u-flex-col u-row-between">
						<view class="u-font-30 u-font-bold">{{item.title}}</view>
						<view class="u-font-24 u-color-gray">¥{{item.price}}</view>
					</view>
				</view>
				<view class="u-flex u-row-right u-font-20">
					<view class="point_tag">{{item.tag}}</view>
				</view>
			</view>
		</view>
		<view class="u-m-30 u-flex u-row-between">
			<view class="point_title">温馨提示</view>
			<view class="u-color-blue" @click="goAgreement">查看积分说明 ></view>
		</view>
		<view class="u-m-30 u-font-24 u-color-gray">
			<rich-text :nodes="content"></rich-text>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="bottom_box">
			<view>
				<view class="u-color-puce">
					<span>¥</span>
					<span class="u-m-l-10 u-font-40 u-font-bold">{{checkObj.price || '0.00'}}</span>
				</view>
				<view class="u-font-24 u-m-t-5 u-color-gray">积分可直接在平台发布对接使用</view>
			</view>
			<view class="recharge_btn" @click="handleSubmit">确认充值</view>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import { getRechargeProduct,getAgreement, generateOrderSn, createOrder, orderStatus } from '@/network/api.js'
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				image: require("@/common/img/Recharge.png"),
				background: {
					background: "linear-gradient(to right, #31396A, #404B88)"
				},
				list: [],
				checkObj: {},
				content: "<p>1、充值购买积分仅限于本系统内使用</p><p>2、充值购买的积分不过期、不清零、长期有效</p><p>3、积分充值比例为1元兑换10个积分</p><p>4、积分充值500元以上，并且在一个月后有使用，联系工作人员可以开具发票</p>",
				userScore:''
			}
		},
		onLoad(options){
			this.userScore = options.score
			this.handleGetScoreList()
			this.handleGetAgreement()
		},
		methods:{
			handleGetScoreList(){
				 getRechargeProduct().then(res=>{
					 res.data.map(item=>item.check = false)
					 this.list = res.data
				 })
			},
			handleGetAgreement(){
				getAgreement({type:8}).then(res=>{
					this.content = res.data.content
				})
			},
			changePoint(val){
				this.checkObj = val
			},
			goAgreement(){
				uni.navigateTo({
					url: '/operate/agreement/agreement?type=6'
				})
			},
			handleSubmit(){
				uni.showLoading({
					title: '订单支付中',
				})
				const _this = this
				generateOrderSn().then(res=>{
					const params = {
						id: this.checkObj.id,
						type: "integral",
						order_sn: res.data.order_sn,
						userid: uni.getStorageSync("user_id")
					}
					
					createOrder(params).then(orderRes=>{
						uni.requestPayment({
							provider: "wxpay",
							appId: orderRes.data.order_str.appId,
							timeStamp: orderRes.data.order_str.timeStamp,
							nonceStr: orderRes.data.order_str.nonceStr,
							package: orderRes.data.order_str.package,
							signType: orderRes.data.order_str.signType,
							paySign: orderRes.data.order_str.paySign,
							success(res){
								uni.hideLoading()
								const statusParams = {
									order_id: orderRes.data.order_id,
									type: "integral"
								}
								orderStatus(statusParams).then(res=>{
									if(res.data.status) {
										uni.showLoading({
											title: '订单支付成功',
											duration: 1000
										}).then(() => {
											uni.navigateBack({
												delta: 1
											})
										})
									}
								})
							},
							fail(err) {
								uni.hideLoading()
							},
							complete() {
								uni.hideLoading()
							}
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.point_header {
		width: 100%;
		height: 250rpx;
		background-image: url("https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240731627315747253.png");
		background-size: cover;
		background-position-y: -157%;

		.header_point {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.header_point_title {
				font-size: 70rpx;
				font-weight: bold;
				color: #fff;
			}

			.header_point_tag {
				color: #E0E0E0;
			}
		}
	}

	.check_point {
		width: 47%;
		padding: 10rpx 0 0 10rpx;
		border: 1rpx solid #2C76ED;
		border-radius: 20rpx;
		background: #fff;

		.point_tag {
			background: #2C76ED;
			color: #fff;
			padding: 4rpx 12rpx;
			border-radius: 15rpx 0 15rpx 0;
		}
	}

	.common_point {
		width: 47%;
		padding: 10rpx 0 0 10rpx;
		border: 1rpx solid #868B9A;
		border-radius: 20rpx;
		background: transparent;

		.point_tag {
			background: #868B9A;
			color: #fff;
			padding: 4rpx 12rpx;
			border-radius: 15rpx 0 15rpx 0;
		}
	}

	.point_title {
		padding: 4rpx 16rpx;
		border-radius: 10px 10px 10px 0px;
		background-color: #fb6316;
		color: #fff;
		font-size: 24rpx;
	}

	.recharge_btn {
		width: 40%;
		background: #404B88;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
	}
</style>